import React , { useEffect } from 'react'
import { Card } from 'antd'
/* 
1.yarn add -D  echarts 进行了安装
2.使用echarts
*/

// 全部引入了echarts ,会导致打包文件比较大，可以选择按需导入
// import echarts from 'echarts'
import echarts from '../../../plugin/echarts'

/* 
1.准备一个容器bass_bar，具有宽高
2.获取容器通过echarts.init()方法初始化echarts实例
3.根据个人的需求去配置图表
4.通过setOption()方法生成图表
*/

export default function Bar() {
  // 配置图表
  const intiBaseBarOption = {
    // 标题
    title: {
      text: '用户骑行订单'
    },
    // 提示框
    tooltip: {
      // 触发类型 轴触发
      trigger: 'axis'
    },
    // x轴
    xAxis: {
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    // y轴
    yAxis: {
      // type属性的值是value的话，不需要去配置数据，y轴去自动取series去找数据进行图表的绘制
      type: 'value'
    },
    // 配置的主要是y轴的数据
    series: [
      {
        // 相当于y轴的名称
        name: '订单量',
        // 图表的类型 bar 是柱形图
        type: 'bar',
        // y轴的值，要与x轴对应起来
        data: [1000, 2000, 1500, 3000, 2000, 1200, 4000]
      }
    ]
  }
  const intiBarOption = {
    // 标题
    title: {
      text: '用户骑行订单'
    },
    // 图例属性
    legend: {
      data: ['摩拜', 'OFO', '小蓝车']
    },
    // 提示框
    tooltip: {
      // 触发类型 轴触发
      trigger: 'axis'
    },
    // x轴
    xAxis: {
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    // y轴
    yAxis: {
      // type属性的值是value的话，不需要去配置数据，y轴去自动取series去找数据进行图表的绘制
      type: 'value'
    },
    // 配置的主要是y轴的数据
    series: [
      {
        // 相当于y轴的名称
        name: '摩拜',
        // 图表的类型 bar 是柱形图
        type: 'bar',
        // y轴的值，要与x轴对应起来
        data: [1000, 20000, 1500, 3000, 20000, 12000, 40000]
      },
      {
        // 相当于y轴的名称
        name: 'OFO',
        // 图表的类型 bar 是柱形图
        type: 'bar',
        // y轴的值，要与x轴对应起来
        data: [25000, 40000, 15000, 30000, 2000, 12000, 4000]
      },
      {
        // 相当于y轴的名称
        name: '小蓝车',
        // 图表的类型 bar 是柱形图
        type: 'bar',
        // y轴的值，要与x轴对应起来
        data: [10000, 30000, 35000, 3000, 2000, 7000, 8000]
      }
    ]
  }
  function intiBaseBar() {
    const Charts = echarts.init(document.getElementById('bass_bar'), null, {
      // 建议大家使用CSS控制div的大小
      width: 800,
      height: 500
    })
    Charts.setOption(intiBaseBarOption)
  }
  function initBar() {
    const Charts = echarts.init(document.getElementById('init_bar'))
    Charts.setOption(intiBarOption)
  }
  useEffect(() => {
    intiBaseBar()
    // eslint-disable-next-line
  }, [])

  useEffect(() => {
    initBar()
    // eslint-disable-next-line
  }, [])
  return ( 
    <div>
      <Card>
        <div id="bass_bar" style={{ height: 500 }}></div>
      </Card>
      <Card style={{ marginTop: 10 }}>
        <div id="init_bar" style={{ height: 500 }}></div>
      </Card>
    </div>
  )
}
